<template>
  <div class="">
    <div class="title">
      <span class="title_big">栏目管理-列表</span>
    </div>
    <el-form
      size="mini"
      :inline="true"
      :model="searchForm"
      class="demo-form-inline search"
    >
      <el-form-item label="标题">
        <el-input
          v-model="searchForm.realname"
          size="mini"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="专题">
        <el-input
          v-model="searchForm.realname"
          size="mini"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="前台隐藏">
        <el-select
          size="mini"
          v-model="searchForm.status"
          clearable
          placeholder="请选择"
        >
          <el-option value="隐藏"></el-option>
          <el-option value="显示"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button size="mini" type="info">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="filter">
      <el-button type="info" @click="editUser">新增栏目</el-button>
      <!-- <el-button type="info">修改</el-button>
      <el-button type="info">删除</el-button> -->
    </div>
    <div>
      <el-table
        :data="colList"
        style="width: 100%"
        :default-sort="{ prop: 'nodeId', order: 'descending' }"
        row-key="nodeId"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column
          type="selection"
          label="全选"
          width="55"
        ></el-table-column>
        <el-table-column prop="nodeId" label="ID" sortable> </el-table-column>
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="code" label="编码" width="220">
        </el-table-column>
        <el-table-column prop="description" label="简介" width="220">
        </el-table-column>
        <el-table-column prop="" label="模型" width="220"> </el-table-column>
        <el-table-column prop="nodetype" label="前台隐藏"> </el-table-column>
        <el-table-column prop="htmlStatus" label="HTML"> </el-table-column>
        <el-table-column prop="operate" label="操作" fixed="right" width="220">
          <template slot-scope="scope">
            <el-button type="text" class="modify">修改</el-button>
            <el-button type="text" class="completely" @click="delCol(scope.row.nodeId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSize"
        @current-change="handlePage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <Drawer :isDrawer.sync="isDrawer" :title="'栏目管理-新增'" :size="'60%'">
        <columnSub
          ref="add"
          @cloes="closeDrawer()"
          @List="columnList()"
        ></columnSub>
        <template #footer>
          <el-button size="medium" @click="closeDrawer">取消</el-button>
          <el-button type="primary" size="medium" @click="addColumn"
            >保存</el-button
          >
        </template>
      </Drawer>
    </div>
  </div>
</template>

<script>
import * as api from "./api";
import Drawer from "@/components/drawer";
import columnSub from "./components/columnSub.vue";
export default {
  components: {
    Drawer,
    columnSub
  },
  data() {
    return {
      //栏目列表
      colList: [],
      searchForm: {
        realname: "",
        orgname: "",
        role: "",
        memberGroup: "",
        type: "",
        status: ""
      },
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      input: "",
      input5: "",
      input6: "",
      checked: "",
      handleSize: "",
      handlePage: "",

      isDrawer: false,
      userForm: [], //用户列表
      total: null, //总条数
      page: 1, //页数
      size: 10 //条数
    };
  },
  created() {
    this.columnList();
  },
  methods: {
    //新增栏目
    addColumn() {
      this.$refs.add.addColumn();
      this.columnList();
      this.closeDrawer();
    },
    //栏目列表
    columnList() {
      api.columnView().then(res => {
        if (res.data.code == 200) {
          this.colList = res.data.list;
        }
      });
    },
    //栏目删除
    delCol(id) {
      api.columnDelete({nodeId:id}).then(res=>{
        this.columnList();
      })
    },
    formatter(row, column) {
      return row.address;
    },
    editUser() {
      this.isDrawer = true;
    },
    closeDrawer() {
      this.isDrawer = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.search {
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  padding: 13px 10px 0;
  margin: 20px 0 30px;
  .el-select {
    width: 100px;
  }
}
.columns {
  color: rgba(251, 83, 75, 1);
  margin-right: 20px;
}
.completely {
  color: rgba(251, 83, 75, 1);
  margin-right: 20px;
}
.delete {
  color: rgba(251, 83, 75, 1);
  margin-right: 20px;
}
.modify {
  color: rgba(251, 83, 75, 1);
  margin-right: 20px;
}
.copy {
  color: rgba(251, 83, 75, 1);
  margin-right: 20px;
}
.notyet {
  color: rgba(104, 120, 240, 1);
}
.already {
  color: rgba(104, 120, 240, 1);
}
.eject {
  margin-top: 20px;
}
.label_three {
  color: rgba(255, 164, 43, 1);
  margin-left: 20px;
}

.label_two {
  color: rgba(104, 120, 240, 1);
  margin-left: 20px;
}
.label_one {
  color: rgba(251, 83, 75, 1);
}
.filter > div {
  width: 56px;
  height: 24px;
  background-color: #6878f0;
  border-radius: 5px;
  box-shadow: 0px 0px 6px rgba(0, 12, 100, 0.2);
  margin-left: 20px;
}
.filter {
  display: flex;
  margin-left: 0px;
  margin-top: 25px;
  margin-bottom: 15px;
}
.dropdown_top > div > span {
  width: 70px;
  font-family: Source Han Sans CN;
  color: #666666;
  font-size: 18px;
  line-height: 30px;
}
.dropdown_top > div {
  display: flex;
  width: 150px;
  height: 24px;
  text-align: center;
  margin-left: 10px;
}
.dropdown_top {
  display: flex;
  margin-left: 15px;
  padding-top: 15px;
}
.dropdown {
  width: 1615px;
  height: 92px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  margin-top: 20px;
}
.title_small {
  width: 73px;
  height: 16px;
  font-family: Source Han Sans CN;
  color: #666666;
  font-size: 16px;
}
.title_big {
  width: 153px;
  height: 24px;
  font-family: Source Han Sans CN;
  font-weight: 700;
  color: #666666;
  font-size: 24px;
}
.title {
  margin-left: 20px;
  margin-top: 40px;
}
#angry {
  height: 20px;
}
</style>
